import React, { Component } from 'react'

import { Link,Route,Switch } from 'react-router-dom'

import Detail from './Detail'

export default class Message extends Component {

    state ={
        messageArr:[
            {id:'01',title:"消息1"},
            {id:'02',title:"消息2"},
            {id:'03',title:"消息3"}
        ]
    }

    // pushRoute
    pushRoute = (id,title)=>{
        // params传参
        // this.props.history.push(`/home/message/detail/${id}/${title}`)

        // searc传参
        this.props.history.push(`/home/message/detail/?id=${id}&title=${title}`)

        // state传参
    }


    // replaceRoute
    replaceRoute = (id,title)=>{
        // params传参
        // this.props.history.replace(`/home/message/detail/${id}/${title}`)

        // searc传参
        this.props.history.replace(`/home/message/detail/?id=${id}&title=${title}`)

        // state传参
    }

    render() {
        console.log(this.props)
        const { messageArr } = this.state
        return (
            <div>
               <ul>
                   { 
                        messageArr.map((messageObj)=>{
                            return(
                                <li key={ messageObj.id }>
                                    {/* params参数 */}
                                    {/* <Link to={ `/home/message/detail/${messageObj.id}/${messageObj.title}` }>{ messageObj.title}</Link> */}
                                    {/* search参数 */}
                                    <Link to={ `/home/message/detail/?id=${messageObj.id}&title=${messageObj.title}` }>{ messageObj.title}</Link>
                                    {/* state参数 */}
                                    {/* <Link replace to={{ pathname:'/home/message/detail',state:{ id:messageObj.id,title:messageObj.title } }}>{ messageObj.title}</Link> */}

                                    {/* Api组件 */}
                                    <button onClick={ () => this.pushRoute(messageObj.id,messageObj.title) }>push</button>
                                    <button onClick={ () => this.replaceRoute(messageObj.id,messageObj.title) }>replace</button>
                                </li>
                            )
                        })
                   }
               </ul>
               <hr />
               <Switch>
                   {/* params接收参数 */}
                   {/* <Route path="/home/message/detail/:id/:title" component={ Detail } /> */}
                   {/* search接收参数  */}
                   <Route path="/home/message/detail" component={ Detail } />
                   {/* state接收参数  */}
                   {/* <Route path="/home/message/detail" component={ Detail } /> */}
               </Switch>
            </div>
        )
    }
}
